<template>
  <div>
    <div class="filter-box-wrapper animated" :class="showFilterBox?'bounce':''">
      <!-- <div class="btn_showMoreItem" @click="showMoreItem">
      <i :class="'iconfont '+(styleObject.height=='60px'?'icon-avatar-man':'icon-eye_close')"></i>
      </div>-->
      <el-row :gutter="5" class="filter-box" :style="styleObject">
        <el-col :xs="12" :sm="8" :lg="6">
          <div class="filter-box-content clearfix">
            <span class="lable">项目名称：</span>
            <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="6">
          <div class="filter-box-content clearfix">
            <span class="lable">状态:</span>
            <el-select v-model="filterOpt.select1" size="small" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="6">
          <div class="filter-box-content clearfix">
            <span class="lable">日期选择:</span>
            <el-date-picker
              size="small"
              v-model="filterOpt.dateValue"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8" :lg="6">
          <div class="filter-box-button">
            <el-button type="default" @click="searchInfo">查询</el-button>
            <el-button type="info" @click="resetFilter">清空</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <OptTable
      :datajson="TableJson"
      :formatfn="TableFormatFn"
      @handleSelectionChange="handleSelectionChange"
      @handleRowDblclick="handleRowDblclick"
      @pagingfn="Callback_TablePaging"
    ></OptTable>
  </div>
</template>
<script>
import OptTable from "@/components/OptTable"
export default {
  components: { OptTable },
  name: 'todoList',
  data () {
    return {
      showFilterBox: false,
      styleObject: {
        height: '60px'
      },
      //筛选条件
      filterOpt: {
        input1: "",
        select1: '',
        dateValue: ""
      },
      //下拉框选项
      options: [{
        value: '选项1',
        label: '111'
      }, {
        value: '选项2',
        label: '222'
      }, {
        value: '选项3',
        label: '333'
      }, {
        value: '选项4',
        label: '444'
      }, {
        value: '选项5',
        label: '555'
      }],
      loading: true,
      //表格数据
      TableJson: {
        Config: { type: "selection", Loading: false, ErrorType: null, OrderIsID: true, Order: "102", OrderType: "desc", PagingIndex: 1, PagingSize: 30, PagingCount: 0, RecordCount: 0 },
        Index: [
          { Genre: "name", IndexID: "name", IndexName: "name", IndexText: "姓名", IndexTypeID: 1, IndexTypeName: "基础信息", IsDefault: 1, IsOrder: 0, IsReadOnly: 1, Order: 0, TotalIndexName: "", Width: "50" },
          { Genre: "address", IndexID: "address", IndexName: "address", IndexText: "地址", IndexTypeID: 1, IndexTypeName: "基础信息", IsDefault: 1, IsOrder: 0, IsReadOnly: 1, Order: 0, TotalIndexName: "", Width: "100" },
          { Genre: "date", IndexID: "date", IndexName: "date", IndexText: "日期", IndexTypeID: 1, IndexTypeName: "基础信息", IsDefault: 1, IsOrder: 0, IsReadOnly: 1, Order: 0, TotalIndexName: "", Width: "100" },
        ],
        SumData: [],
        Data: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', test: "测试" }]
      },
      //表格数据-格式化方法
      TableFormatFn: (info, genre, isSum, row) => {
        //console.log(genre, isSum, row)
        return info;
      }
    };
  },
  methods: {
    showMoreItem () {
      //展开搜索栏
      if (this.styleObject.height == "60px") {
        this.showFilterBox = true;
        this.styleObject = {
          height: "100%"
        }
      } else {
        this.showFilterBox = false;
        this.styleObject = {
          height: "60px"
        }
      }
    },
    //搜索查询
    searchInfo () {
      this.TableJson.Config.ErrorType = 0;//无数据
      this.TableJson.Data = []
    },
    //重置搜索条件
    resetFilter () {
      this.filterOpt = {
        input1: "",
        select1: '',
        dateValue: ""
      }
    },
    //多选选中回调事件
    handleSelectionChange (val) {
      console.log(val)
    },
    //当某一行被双击时会触发该事件
    handleRowDblclick (row, column, event) {
      console.log(row);
      console.log(column);
      console.log(event);
    },
    //表格分页回调事件
    Callback_TablePaging (pagingIndex) {
      console.log("第" + pagingIndex + "页");
      this.TableJson.Config.PagingIndex = pagingIndex;
      this.GetData_Table();//获取列表数据
    },
  }
}
</script>
<style lang="scss" scoped>
.filter-box-wrapper {
  position: relative;
  .btn_showMoreItem {
    width: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    bottom: -18px;
    right: 10px;
    z-index: 2;
    text-align: center;
    background: #ff9800;
    i {
      color: #fff;
    }
  }
  .filter-box {
    border-top: 1px dashed #d8d8d8;
    border-bottom: 1px dashed #d8d8d8;
    margin: 10px 0px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 10px 5px 0 5px;
    height: 60px;
    overflow: hidden;
    .filter-box-content {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;
      .lable {
        padding: 0 3px;
        min-width: 80px;
        white-space: nowrap;
        text-align: left;
        display: flex;
        align-items: center;
      }
    }
    .filter-box-button {
      display: flex;
      justify-content: center;
      padding: 10px;
    }
  }
}
</style>
